{extend name='main'}

{block name="content"}
<ul id="zTree" class="ztree"></ul>
<div class="hr-line-dashed"></div>
<div class="layui-form-item text-center">
    <button class="layui-btn" data-submit-role type='button'>保存数据</button>
    <button class="layui-btn layui-btn-danger" type='button' onclick="window.history.back()">取消编辑</button>
</div>
{/block}

{block name="script"}
<script>
    var roleForm = new function () {
        this.data = {};
        this.ztree = null;
        this.setting = {
            view: {showLine: false, showIcon: false, dblClickExpand: false},
            check: {enable: true, nocheck: false, chkboxType: {"Y": "ps", "N": "ps"}},
            callback: {
                beforeClick: function (treeId, treeNode) {
                    if (treeNode.children.length < 1) {
                        window.roleForm.ztree.checkNode(treeNode, !treeNode.checked, null, true);
                    } else {
                        window.roleForm.ztree.expandNode(treeNode);
                    }
                    return false;
                }
            }
        };
        this.renderChildren = function (data, level) {
            var childrenData = [];
            for (var i in data) {
                var children = {};
                children.open = true;
                children.node = data[i].node;
                children.name = data[i].title || data[i].node;
                children.checked = data[i].checked || false;
                children.children = this.renderChildren(data[i]._sub_, level + 1);
                childrenData.push(children);
            }
            return childrenData;
        };
        this.getData = function (self) {
            var index = $.msg.loading();
            $.form.load('{:url()}', {id: '{$vo.id}', action: 'get'}, 'post', function (ret) {
                self.data = self.renderChildren(ret.data, 1);
                return $.msg.close(index), self.showTree(), false;
            });
        };
        this.showTree = function () {
            this.ztree = $.fn.zTree.init($("#zTree"), this.setting, this.data);
            while (true) {
                var nodes = this.ztree.getNodesByFilter(function (node) {
                    return (!node.node && node.children.length < 1);
                });
                if (nodes.length < 1) {
                    break;
                }
                for (var i in nodes) {
                    this.ztree.removeNode(nodes[i]);
                }
            }
        };
        this.submit = function () {
            var nodes = [];
            var data = this.ztree.getCheckedNodes(true);
            for (var i in data) {
                (data[i].node) && nodes.push(data[i].node);
            }
            $.form.load('{:url()}', {id: '{$vo.id}', action: 'save', nodes: nodes}, 'post');
        };
        this.getData(this);
    };
    // 提交表单
    $('[data-submit-role]').on('click', function () {
        roleForm.submit();
    });
</script>
{/block}

{block name="style"}
<link href="__STATIC__/plugs/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="__STATIC__/plugs/ztree/ztree.all.min.js"></script>
<style>
    ul.ztree li {
        white-space: normal !important
    }

    ul.ztree li span.button.switch {
        margin-right: 5px
    }

    ul.ztree ul ul li {
        display: inline-block;
        white-space: normal
    }

    ul.ztree > li {
        padding: 15px 25px 15px 15px;
    }

    ul.ztree > li > ul {
        margin-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .1);
    }

    ul.ztree > li > ul > li {
        padding: 5px
    }

    ul.ztree > li > a > span {
        font-size: 15px;
        font-weight: 700
    }

    ul.ztree .level2 .button.level2 {
        background: none;
    }
</style>
{/block}